{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import sub_nav with context %}

{% extends "firefox/base/base-protocol.html" %}

{% block page_title %}{{ ftl('what-is-a-browser-what-is-a-web') }}{% endblock %}

{% block page_desc %}{{ ftl('what-is-a-browser-a-web-browser') }}{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-article') }}
  {{ css_bundle('what-is-a-browser') }}
{% endblock %}

{% block sub_navigation %}
  {% if ftl_has_messages('sub-navigation-firefox', 'sub-navigation-browser-history') %}
    {{ sub_nav(
      title={
        'text':  ftl('sub-navigation-firefox'),
        'href':  "https://www.firefox.com/?redirect_source=mozilla-org",
        'icon':  static('protocol/img/logos/firefox/browser/logo.svg'),
        'cta_name': 'Firefox'
      },
      links=[
        {
          'text':  ftl('sub-navigation-browser-history'),
          'href':  url('firefox.browsers.browser-history'),
          'cta_name': 'Browser History'
        }
      ]
    ) }}
  {% endif %}
{% endblock %}

{% block content %}
  <div class="mzp-l-content">
  <article class="mzp-c-article">

    <h1 class="mzp-c-article-title">{{ self.page_title() }}</h1>
    <p class="mzp-c-article-intro">{{ ftl('what-is-a-browser-a-web-browser') }}</p>

    {{ download_firefox_thanks(dom_id='download-button-primary', download_location='primary') }}

    <img src="{{ static('img/firefox/browsers/what-is-a-browser/illo-browser.png') }}" alt="" class="c-article-image" width="954" height="446">

    <p>{{ ftl('what-is-a-browser-the-web-is-a-vast') }}</p>

    <p>
    {{ ftl('what-is-a-browser-its-important', tools='https://blog.mozilla.org/firefox/internet-search-engine-browser/') }}
    {{ ftl('what-is-a-browser-in-a-short-period-long') }}
    </p>

    <blockquote aria-hidden="true" role="presentation">
      <p>
      {{ ftl('what-is-a-browser-in-a-short-period') }}
      </p>
    </blockquote>

    <h2 class="c-section-title">{{ ftl('what-is-a-browser-how-does-a-web') }}</h2>

    <p>{{ ftl('what-is-a-browser-a-web-browser-long') }}</p>

    <p>{{ ftl('what-is-a-browser-sadly-not-all', standards='https://developer.mozilla.org/docs/Archive/Web_Standards') }}</p>

    <p>{{ ftl('what-is-a-browser-when-the-web-browser', html='https://developer.mozilla.org/docs/Glossary/HTML') }}</p>

    <p>{{ ftl('what-is-a-browser-hyperlinks-allow', hyperlink='https://developer.mozilla.org/docs/Glossary/Hyperlink', url='https://wikipedia.org/wiki/URL') }}</p>

    <h2 class="c-section-title">{{ ftl('what-is-a-browser-cookies-not-the') }}</h2>

    <p>{{ ftl('what-is-a-browser-websites-save', cookies='https://wikipedia.org/wiki/HTTP_cookie') }}</p>

    <p>{{ ftl('what-is-a-browser-there-are-also') }}</p>

    <blockquote aria-hidden="true" role="presentation">
      <p>{{ ftl('what-is-a-browser-when-you-go-to') }}</p>
    </blockquote>

    <h2 class="c-section-title">{{ ftl('what-is-a-browser-understanding') }}</h2>

    <p>{{ ftl('what-is-a-browser-nearly-all-major') }}</p>

    <div class="download-firefox">
      {{ download_firefox_thanks(dom_id='download-button-secondary', download_location='secondary') }}
    </div>

    <p>{{ ftl('what-is-a-browser-firefox-helps') }}</p>

    <h2 class="c-section-title">{{ ftl('what-is-a-browser-making-your-web') }}</h2>

    <p>{{ ftl('what-is-a-browser-most-major-web') }}</p>

    <p>{{ ftl('what-is-a-browser-all-browser-makers') }}</p>

  </article>
</div>
{% endblock %}
